:root{
 --sidebar-width:300px;
  --header-height: calc(1.5em * 3);

}

html,body{margin:0;padding:0}
body{
 font-family:"Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden;
}

nav {
  height: 100vh;
  overflow-y: auto;
}

.content-area {
  height: 100vh;
  overflow-y: auto;
}

/* =========================
   レイアウト
========================= */
.layout{
 display:grid;
 grid-template-columns:var(--sidebar-width) 1fr;
 min-height:100vh;
}
.use-case-box {
    background-color: #f0f8ff !important;
    border: 1px solid #b0c4de !important;
    border-left: 5px solid #0080ca !important;
    border-radius: 4px !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
}
.use-case-box h4 {
    margin-top: 0 !important;
    color: #004080 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
}
.use-case-box ul {
    margin-bottom: 0 !important;
    padding-left: 20px !important;
}
/* =========================
   左メニュー
========================= */
nav{
 background:#000;
 color:#fff;
 overflow:auto;
}

.nav-header{
 position:sticky;
 top:0;
 background:#000;
 color:#fff;
 font-weight:bold;
 padding:14px 16px;
 border-bottom:1px solid #333;
 z-index:10;
}

nav h1{
 margin:16px;
 font-size:14px;
}

nav details{
 margin:6px 12px;
 background:#111;
 border:1px solid #333;
 border-radius:6px;
}

nav summary{
 padding:8px 10px;
 cursor:pointer;
}

nav summary span{
 font-weight:600;
 color:#fff;
}

nav ul{
 list-style:none;
 margin:0;
 padding:6px 10px 10px 16px;
}

nav li{margin:4px 0}

nav a{
 display:block;
 padding:6px 8px;
 border-radius:4px;
 color:#fff;
 text-decoration:none;
}

nav a:hover{background:#1f2937}

nav a.active{
 background:#2563eb;
}

/* =========================
   右側エリア
========================= */
.content-area{
 display:flex;
 flex-direction:column;
}

/* ヘッダ（右本文専用） */

.header{
  position: sticky;
  top: 0;

  /* ★ 高さ指定はやめる */
  background: #2563eb;
  color: #fff;

  display: flex;
  align-items: center;

  /* ★ 上下に1行分ずつ余白を作る */
  padding-top: 1.5em;
  padding-bottom: 1.5em;

  z-index: 100;
}

.header-inner{
  padding: 0 16px;       /* 左右余白のみ */
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5em;
}


/* 本文 */
main{padding:24px}

section{display:none;max-width:1000px;scroll-margin-top: var(--header-height);}
section:target{display:block}

/* 見出しなど（元CSS維持） */
h2{
 border-left:5px solid #1e293b;
 padding-left:10px;
 margin:0 0 20px;
 font-size:30px;
 font-weight:bold;
}

h3{
 scroll-margin-top: var(--header-height);
 margin-bottom:10px;
 font-size:18px;
 font-weight:bold;
}
.notice-box {
  border: 1px solid #d1d5db;
  background: #f8fafc;
  border-radius: 6px;
  padding: 0.8em 1em;
  margin:  0 0 0.2em 0.2em;
  font-size: 0.92em;
  color: #374151;
}
.notice-box small {
  font-size: 0.95em;
  color: #555;
}

.notice-box li {
    font-size: 0.95em;
    color: #555;
    margin-left: 20px;
    margin-bottom: 2px;
}

p,li{line-height:1.85}
/* tables */
/* table{border-collapse:collapse;width:100%;margin:12px 0;font-size:0.95rem} */
/* th,td{border:1px solid #cbd5e1;padding:8px 10px;vertical-align:top} */
/* テーブル全体の基本設定 01用 */
.table_design01 {
  border-collapse: collapse;
  width: 100%; 
}

/* ヘッダーとセルの共通デザイン 01用 */
.table_design01 th, 
.table_design01 td {
  border: 2px solid #fff;
  background-color: #e6f1f6;
  padding: 1em;
}

/* 各クラスごとの幅指定 */
.table_design01 .item {
  width: 300px;
}

.table_design01 .spec {
  width: 400px;
}

.table_design01 .refe {
  width: 400px;
}
/* ヘッダーのスタイル */
.table_design01 th {
  background-color: #4d9bc1;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* テーブル全体の基本設定 02用 */
.table_design02 {
  border-collapse: collapse;
  width: 100%; 
}

/* ヘッダーとセルの共通デザイン 02用 */
.table_design02 th, 
.table_design02 td {
  border: 2px solid #fff;
  background-color: #e6f1f6;
  padding: 1em;
}

/* 各クラスごとの幅指定 02*/
.table_design02 .entry {
  width: 250px;
}

.table_design02 .trans {
  width: 280px;
}

.table_design02 .imei {
  width: 180px;
}

.table_design02 .simid {
  width: 180px;
}

/* ヘッダーのスタイル */
.table_design02 th {
  background-color: #4d9bc1;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.subpara {margin-inline-start: 1.5rem;}


th {
  background-color: #e6e6e6;
  padding: 8px;
  border: 1px solid #ccc;
}

td {
  padding: 8px;
  border: 1px solid #ccc;
}

/* 共通の親要素 */
.brink-block {
    margin-top: 1rem;
}

/* ゆっくり点滅 0.25秒間隔*/
.blink-250ms {
  animation: blink_250ms 0.25s linear infinite;
}

@keyframes blink_250ms {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 素早く点滅 */
.blink-200on-800off {
  animation: blink_200_800 1s linear infinite;
}

@keyframes blink_200_800 {
  0%, 20% { opacity: 1; }       /* 200ms 点灯 */
  20.01%, 100% { opacity: 0; }  /* 800ms 消灯 */
}



.blink-1on-3off {
  animation: blink_1_3 4s linear infinite;
}

@keyframes blink_1_3 {
  0%, 25% { opacity: 1; }       /* 1秒 点灯 */
  25.01%, 100% { opacity: 0; }  /* 3秒 消灯 */
}


.blink-0_5on-10off {
  animation: blink_0_5_10 10.5s linear infinite;
}

@keyframes blink_0_5_10 {
  0%, 4.76% { opacity: 1; }        /* 0.5秒 点灯 */
  4.77%, 100% { opacity: 0; }      /* 10秒 消灯 */
}


/* 警告 */
.title-notice {
  background-image: url('../images/notice01.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size:30px auto;
  padding: 5px 35px;
}
/* 印刷 */
@media print{
 nav,.header{display:none}
 section{display:block!important}
}